<template>
  <div
    class="box"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <img src="../../assets/images/login1.png" alt="" class="bg" />
    <div class="title">
      <img :src="appLogo" alt="" />
      <p>
        推荐人：
        <span>{{ nickName }}</span>
      </p>
    </div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      ref="formLabelAlign"
    >
      <el-form-item prop="name">
        <el-input
          v-model="formLabelAlign.name"
          placeholder="请输入您的手机号"
          clearable
        >
          <i
            slot="prefix"
            class="iconfont icon-icon"
            style="color: #5163d0;line-height:50px;"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="region">
        <el-input
          v-model="formLabelAlign.region"
          placeholder="请设置您的登录密码"
          show-password
        >
          <i
            slot="prefix"
            class="iconfont icon-zu"
            style="color: #5163d0;line-height:50px;"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="type">
        <el-input v-model="formLabelAlign.type" placeholder="请输入验证码">
          <i
            slot="prefix"
            class="iconfont icon-dunpai1"
            style="color: #5163d0;line-height:50px;"
          ></i>
        </el-input>
        <div class="code" v-if="code" @click="get">获取验证码</div>
        <div class="code" v-else @click="gain">
          重新获取(<span>{{ num }}</span
          >)s
        </div>
      </el-form-item>
      <el-form-item>
        <button class="resg" @click="sub">立即注册</button>
      </el-form-item>
      <div class="down">
        <el-button round @click="selectDownloadHtml('ios')">ios下载</el-button>
        <el-button round @click="selectDownloadHtml('Android')"
          >Android下载</el-button
        >
      </div>
    </el-form>
    <p class="end">下载请复制链接在浏览器打开，微信暂不支持</p>
  </div>
</template>

<script>
import { toRegisterNew, selectDownloadHtml, registerYzm } from '../../local/api'
import qs from 'qs'

export default {
  data() {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      rules: {
        name: [{ required: true, validator: this.ValidPhone, trigger: 'blur' }],
        region: [{ required: true, validator: this.ValidPwd, trigger: 'blur' }],
        type: [{ required: true, validator: this.ValidCode, trigger: 'blur' }]
      },
      code: true,
      num: 30,
      sign: '',
      iosUrl: '',
      AndroidUrl: '',
      loading: false,
      key: '',
      parentId: '',
      oBrandId: '',
      appLogo: '',
      nickName: ''
    }
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('data')))
    this.key = JSON.parse(localStorage.getItem('data')).key
    this.parentId = JSON.parse(localStorage.getItem('data')).userId
    this.oBrandId = JSON.parse(localStorage.getItem('data')).oBrandId
    this.appLogo = JSON.parse(localStorage.getItem('data')).appLogo
    this.nickName = JSON.parse(localStorage.getItem('data')).nickName

    console.log(
      this.key,
      this.parentId,
      this.oBrandId,
      this.appLogo,
      this.nickName,
      '8987'
    )
  },
  methods: {
    // 注册
    async sub() {
      // 加密
      this.sign = this.$md5(
        'oBrandId=' +
          this.oBrandId +
          '&parentId=' +
          this.parentId +
          '&phone=' +
          this.formLabelAlign.name +
          '&pwd=' +
          this.formLabelAlign.region +
          '&verificationCode=' +
          this.formLabelAlign.type +
          '&key=' +
          this.key
      )

      console.log(this.sign)
      this.loading = true
      // 发送请求
      const data = await toRegisterNew(
        qs.stringify({
          phone: this.formLabelAlign.name, // this.formLabelAlign.name
          pwd: this.formLabelAlign.region, // this.formLabelAlign.region
          verificationCode: this.formLabelAlign.type, // this.formLabelAlign.type
          oBrandId: this.oBrandId,
          parentId: this.parentId,
          key: this.key,
          sign: this.sign
        })
      )
      this.loading = false
      this.$message(`${data.msg}`)
      console.log(data)
    },
    // 下载
    async selectDownloadHtml(phone) {
      this.loading = true
      const data = await selectDownloadHtml(
        qs.stringify({ oBrandId: this.oBrandId })
      )
      this.loading = false
      console.log(data)
      this.iosUrl = data.data.iosUrl
      this.AndroidUrl = data.data.androidUrl
      if (phone === 'ios') {
        // window.location.href = this.iosUrl
        this.$router.push({ path: './ios', query: { ios: this.iosUrl } })
      } else {
        // window.location.href = this.AndroidUrl
        this.$router.push({
          path: './Android',
          query: { androidUrl: this.AndroidUrl }
        })
      }
    },
    // 发送验证码
    async get() {
      this.code = !this.code
      const time = setInterval(() => {
        this.num--
        if (this.num === 0) {
          clearInterval(time)
        }
      }, 1000)
      const data = await registerYzm(
        qs.stringify({
          phone: this.formLabelAlign.name,
          oBrandId: this.oBrandId
        })
      )
      console.log(data)
    },
    // 重新获取验证码
    async gain() {
      if (this.num === 0) {
        this.num = 30
        const data = await registerYzm(
          qs.stringify({
            phone: this.formLabelAlign.name,
            oBrandId: this.oBrandId
          })
        )
        const time = setInterval(() => {
          this.num--
          if (this.num === 0) {
            clearInterval(time)
          }
        }, 1000)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 100%;
}
.bg {
  width: 100%;
}
.title {
  position: absolute;
  width: 80%;
  top: 12%;
  left: 50%;
  margin-left: -40%;
  font-size: 2.5em;
  font-family: PangMenZhengDao;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  img {
    width: 15rem;
  }
  p {
    margin: 20px;
  }
}
.el-form {
  position: absolute;
  top: 34%;
  left: 50%;
  margin-left: -40%;
  background-color: #fff;
  width: 80%;
  //   margin: auto;
  border-radius: 15px;
  //   padding: 30px 20px;
  box-shadow: 1px 0px 25px rgb(100, 100, 100);
  /deep/.el-form-item__label {
    line-height: 0;
  }
  /deep/.el-input__inner {
    margin-top: 5px;
    background-color: #f0f0f0;
    border-radius: 20px;
  }
  /deep/.el-input__suffix {
    line-height: 50px;
  }
  .el-form-item {
    position: relative;
    margin: 20px;
    .code {
      position: absolute;
      top: 5px;
      right: 8px;
      color: #4481fe;
    }
  }
  .resg {
    width: 100%;
    border: none;
    height: 40px;
    border-radius: 20px;
    color: #fff;
    outline: none;
    background: linear-gradient(to right, #5b86e5, #4e54c8);
  }
  .down {
    display: flex;
    justify-content: space-between;
    margin: 15px 20px 20px;
    .el-button {
      width: 50%;
      color: #6e7ecf;
      border: 1px solid#6e7ecf;
    }
  }
}
.end {
  color: #282828;
  position: absolute;
  top: 82%;
  left: 50%;
  margin-left: -140px;
}
</style>
